<template>
   
    <el-container>
        <el-row justify="space-evenly">
            <el-col :span="8" >
                <span>预招生档案</span>
                <router-link to="preEnrollment">查看详情</router-link>
            </el-col>
            <el-col :span="8">
                <span>在习生/毕业生档案</span>
                <router-link to="graduate">查看详情</router-link>
            </el-col>
        </el-row>
    </el-container>
</template>

<script setup>
    import { RouterLink, RouterView} from 'vue-router';
</script>

<style lang="less" scoped>
    .el-container{
        background-color: #f5f9fa;
        padding-top:180px;
    }
    .el-row{
        width:100%;
        height:80%;
    }
    .el-col{
        background: #fff;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        transition: transform 0.3s ease; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .el-col:hover{
        transform: scale(1.05); 
        box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1),-5px -5px 8px rgba(0, 0, 0, 0.1);
    }
    span{
        font-weight: 400;
        font-size: 30px;
        display: inline-block;
        margin-bottom: 40px;
    }
    a{
        color:#84abec;
        font-size: 24px;
    }
    a:hover{
        color:#4290f7;
    }
</style>